<template>
  <div>
    <el-button @click="exp" type="primary" style="margin-left: 80%;margin-bottom: 10px"><i class="el-icon-upload2"></i>导出本题数据</el-button>
    <el-table
      :default-sort="{ prop: 'times', order: 'descending' }"
      stripe
      :data="formData"
      style="width: 100%"
    >
      <el-table-column fixed label="序号" width="180" type="index">
      </el-table-column>
      <el-table-column prop="keyword" label="关键词"> </el-table-column>
      <el-table-column sortable prop="times" label="出现次数">
      </el-table-column>
    </el-table>
    <div :id="idcreate" style="height: 200px; width: 200px"></div>
  </div>
</template>

<script>
import 'echarts-wordcloud';
import { v4 as uuidv4 } from 'uuid'
import { getQuestionCount, getQuestionList } from '@/api/form'
export default {
  name: "timesWrapper",
  props: {
    res: {
      required: true
    }
  },
  computed: {
    idcreate() {
      return this.res.field
    }
  },
  methods:{
    exp(){
    }
  },
  async created() {
    console.log(this.res)
    const { data } = await getQuestionCount(this.res.field)
    console.log('sort', data)
    for (let i in data.data) {
      this.formData.push({ keyword: i, times: data.data[i] })
      this.cloudData.push({ 'name': i, 'value': data.data[i] })
    }
    console.log(this.cloudData)
    var chart = this.$echarts.init(document.getElementById(this.idcreate));
    chart.setOption({
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60], rotationRange: [-90, 90],
        rotationStep: 45,
        data: this.cloudData
      }]
    })
  },
  data() {
    return {
      formData: [],
      cloudData: [],
      opt:{
        title: '数据统计',
        column: [{
          label: '总体表头',
          prop: 'header',
          children: [
            {
              label: '关键词',
              prop: 'keyword'
            }, {
              label: '出现次数',
              prop: 'times'
            }
          ]
        }]
      }
    }
  }

}
</script>

<style scoped>
</style>
